<template>
  <el-dialog title="费用类别" width="40%" :before-close="dialogClose" :visible.sync="show">
    <el-form ref="form" :model="item" label-width="80px">
        <el-form-item label="费用类别">
          <el-tag v-for="(key,index) in cate" :key="index" closable
            :disable-transitions="false"
            @close="handleClose(index)">{{key.name}}
          </el-tag>
          <el-input class="input-new-tag" v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"></el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新类别</el-button>
        </el-form-item>
    </el-form>
  </el-dialog>
</template>
 
<script>
export default {
  name: 'costCate',
  props:['show','cate'],
  data() {
    return {
      inputVisible:false,
      inputValue:'',
      item:{}
    }
  },
  created: function() {
    
  },
  methods: {
    dialogClose:function(){
      //this.show = false
      this.$emit("func",{'key':'cateShow','type':1})
    },
    handleClose:function(index) {
      var id = this.cate[index].id
      var that = this
      var data = {
        id:id
      }
      this.$del('cost/cateDel',data).then((res) => {
        if(res.code == 1){
          that.cate.splice(index,1)
        }
      })
      //this.cate.splice(this.tags.indexOf(tag), 1);
      //this.cate.splice(index,1)
    },
    showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
    },
    handleInputConfirm:function(){
      var that = this
      var inputValue = this.inputValue;
      if(inputValue){
        var data = {
          name:inputValue,
          store_id:localStorage.getItem('store_id')
        }
        this.$post('cost/cateAdd',data).then((res) => {
          if(res.code == 1){
            var tag = {id:res.data,name:data.name}
            that.cate.push(tag);
          }
        })
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
  }
}
</script>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>